import { useEffect, useRef } from "react";
import * as echarts from "echarts";
import "./charts.scss";

const Charts = ({ options, width = 0, height = 0, isChartHidden = false }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    console.log("--图表参数--", options);

    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom);

    myChart.setOption(options);
    return () => {
      console.log("##图表更新##");
      myChart.dispose();
    };
  }, [options, width, height, isChartHidden]);

  return (
    <>
      <div
        className="charts"
        ref={chartRef}
        style={{
          width,
          height,
          opacity: isChartHidden ? 0 : 1,
        }}
      ></div>
    </>
  );
};

export default Charts;
